<template>
  <view class="zh-app">
	<u-search :placeholder="searchData.placeholder" @click="search"></u-search>
	<swiper 
		class="swiper"
		circular
		:indicator-dots="swiperData.indicatorDots" 
		:autoplay="swiperData.autoplay" 
		:interval="swiperData.interval"
		:duration="swiperData.duration"
	>
		<swiper-item v-for="item in bannerData.list" :key="item.id" @click="navWebView(item)">
			<view class="swiper-item">
				<image :src="previewImg(item.imgurl)" class="banner"/>
			</view>
		</swiper-item>
	</swiper>
	<view class="dynamic display-flex align-center">
		<image :src="IMG_URL + '/index/dynamic_text.png'" class="dynamic-img"/>
		<view class="flex">
			<swiper
				class="swiper-article"
				circular
				:indicator-dots="false" 
				:autoplay="true" 
				:interval="2000"
				:duration="500"
				:vertical="true"
			>
				<swiper-item v-for="item in articleData.list" :key="item.id" @click="navigateTo('/pages/article/dynamic/index')">
					<view class="display-flex align-center">
						<view class="flex ml-40 font-26 font-302D2D dynamic-text" >
							{{ item.noticeTitle  }}
							<text class="pull-right font-999">{{item.createTime.split(' ')[0]}}</text>
						</view>
						<image src="@/static/icons/right_arrow_light.png" class="right-arrow" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		
	</view>
	<view class="menus display-flex justify-between">
		<view class="item" @click="menuNavTo('')">
			<image :src="IMG_URL + '/index/menu_01.png'" class="menu-icon"/>
			<text class="font-24 font-302D2D">纯棉纱</text>
		</view>
		<view class="item" @click="menuNavTo('纱支40支')">
			<image :src="IMG_URL + '/index/menu_02.png'" class="menu-icon"/>
			<text class="font-24 font-302D2D">精梳40支</text>
		</view>
		<view class="item" @click="menuNavTo('纱支32支')">
			<image :src="IMG_URL + '/index/menu_03.png'" class="menu-icon"/>
			<text class="font-24 font-302D2D">普梳32支</text>
		</view>
		<view class="item" @click="menuNavTo('纱支28支')">
			<image :src="IMG_URL + '/index/menu_01.png'" class="menu-icon"/>
			<text class="font-24 font-302D2D">28支</text>
		</view>
		<view class="item" @click="menuNavTo('纱支30支')">
			<image :src="IMG_URL + '/index/menu_01.png'" class="menu-icon"/>
			<text class="font-24 font-302D2D">30支</text>
		</view>
	</view>
	<view class="business display-flex justify-between">
		<image :src="IMG_URL + '/index/business_01.png'" class="business-icon" @click="handleCertify"/>
		<image :src="IMG_URL + '/index/business_02.png'" class="business-icon" @click="handleService"/>
		<image :src="IMG_URL + '/index/business_03.png'" class="business-icon" @click="handleTrade"/>
	</view>
	<view class="goods">
		<view class="tabs display-flex align-center">
			<view class="font-999 font-30">
				<text class="active">现货商城</text>
			</view>
			<text class="font-BFBFBF ml-15">|</text>
			<view class="ml-15">
				<text class="font-999 font-30">下单即提</text>
			</view>
		</view>
		<view class="list">
			<view class="item display-flex justify-between" v-for="item in goodsData.list" :key="item.id" 
			@click="navigateTo('/pages/shop/goodsDetail?spckid=' + item.spckid + '&spcwid=' + item.spcwid + '&spbhid=' + item.spbhid)">
				<view class="thumbnail">
					<view class="name">
						<text>{{ item.wpggA }}</text>
					</view>
					<image :src="previewImg(file.url)" mode="aspectFit" v-for="file in item.wpggAFileDataList" :key="file.id"/>
				</view>
				<view class="right flex">
					<view class="font-28 font-bold">{{ item.spzs }}</view>
					<view class="tags display-flex flex-wrap">
						<text class="tags-right" v-if="item.wpggA">{{ item.wpggA }}</text>
						<text class="tags-right" v-if="item.spcd">{{ item.spcd }}</text>
						<text class="tags-right" v-if="item.spckmc">{{ item.spckmc }}</text>
					</view>
					<view class="content">
						<view class="font-FF661B display-flex align-center mt-20">
							<text class="font-28">{{ item.price?'¥' + item.price:'电议' }}</text>
							<text class="font-24" v-if="item.price">/吨</text>
						</view>
						<view class="display-flex align-end justify-between mt-10">
							<view class="display-flex align-center font-666 font-20">
								<text>{{ item.updateTime }}</text>
								<text class="ml-10">|</text>
								<text class="ml-10">{{ item.sheng + item.shi}}</text>
							</view>
							<view  @click.stop="openWeightPopup(item)">
								<image src="@/static/icons/home_purchase_car_icon.png" class="purchase-car-icon" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="load-more">
		<u-load-more ref="loadMoreRef"></u-load-more>
	</view>
	<weight-edit-popup :show="showWeightPopup" :data="goodsData.item" @close="closeWeightPopup" @sure="shoppingCartWeightSure"></weight-edit-popup>
  </view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	import { goods, article, systemApi } from '@/api'
	import { util, tip, nav, system } from '@/utils'
	import type { GoodsData } from '@/@type/goods'
	import type { ArticleData } from '@/@type/article'
	import { onLoad, onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	import weightEditPopup from '@/pages/shop/components/weight-edit-popup'
	//import { useAuthStore } from '@/store/auth'
	import { IsItCertified } from '@/enum/user'
	import { isextranetEnum } from '@/enum'
	//https://www.bookstack.cn/read/uni-sdk-202005/40d70fcce1f248fb.md
	import { IMG_URL } from '@/utils/constant'
	
	//const authStore = useAuthStore()
	let isItCertified = ref('')
	const showWeightPopup = ref(false)
	const loadMoreRef = ref()
	const searchData = reactive({
		placeholder:'品种、规格、工艺等'
	})
	
	onLoad(() => {
		articleList()
		goodsList()
		getBanner()
	})
	
	onShow(() => {
		if(nav.isLogin()) {
			//isItCertified.value = authStore.getIsItCertified()
			shoppingCart()
		} else {
			system.setTabBarBadge({
			  index: 2,
			  text: '0'
			})
		}
	})
	
	//广告图
	const bannerData:any = reactive({
		query:{
			dictvalue: "app_index_banner",
			isvalid: "1",
			isextranet:"0"
		},
		list:[],
		total:0,
	})
	const swiperData:any = reactive({
		indicatorDots: false,
		autoplay: false,
		interval: 2000,
		duration: 500
	})
	
	const getBanner = () => {
		systemApi.getBannerList(bannerData.query).then((res:any) => {
			bannerData.list = res.rows
			bannerData.total = res.total
			swiperData.indicatorDots = false
			swiperData.autoplay = false
			if(bannerData.total > 1) {
				swiperData.indicatorDots = true
				swiperData.autoplay = true
			}
		})
	}
	
	const menuNavTo = (data:string) => {
		uni.navigateTo({
			url:'/pages/shop/goodsList?keyword=' + data
		})
	}
	
	//咨询
	const articleData: any = reactive({
		query:{},
		params:{
			pageNum:1,
			pageSize:3,
			status:0,
		},
		list:[],
		total:0
	})
	const articleList = () => {
		article.getNoticeList(articleData.query,articleData.params).then((res: any) => {
			const data: any = res.rows
			data.forEach((item: any) => {
				item.createTime = item.createTime?util.getDate(item.createTime, 'day'):""
				//item.remark = item.remark.length > 30?item.remark.substring(0, 30) + '...': item.remark
				item.noticeTitle = item.noticeTitle.length > 15?item.noticeTitle.substring(0, 15) + '...': item.noticeTitle
			})
			articleData.list = res.rows
		})
	}
	
	const search = () => {
		navigateTo('/pages/shop/search?prevPage=index&placeholder=' + searchData.placeholder)
	}
	
	
	//货物
	const goodsData: any = reactive({
		query:{
			noLoading:false
		},
		params:{
			pageNum:1,
			pageSize:5,
			reasonable:false,
		},
		item:{
			id: '',
			num: 0,
			price: 0,
			spbhid: '',
			spckid: '',
			spcwid: '',
			subtotal: 0,
			weight: 0,
		},
		list:[],
		total:0
	})
	
	const goodsList = (cb?:Function) => {
		goods.getGoodsList(goodsData.query, goodsData.params).then((res:any) => {
			cb && cb()
			const data = res.rows
			data.forEach((item: any) => {
				item.updateTime = item.updateTime?util.getDate(item.updateTime):""
			})
			goodsData.list = [...goodsData.list,...data],
			goodsData.total = res.total
		})
	}
	
	
	onReachBottom(() => {
		if(goodsData.params.pageNum * goodsData.params.pageSize > goodsData.total) return loadMoreRef.value.changeStatusNoMore()
		goodsData.params.pageNum++
		loadMoreRef.value.changeStatusLoading()
		setTimeout(() => {
			goodsData.query.noLoading = true
			goodsList(() => {
				loadMoreRef.value.changeStatusNoLoading()
				if(goodsData.params.pageNum * goodsData.params.pageSize > goodsData.total) return loadMoreRef.value.changeStatusNoMore()
			})
		}, 300)
	})
	
	onPullDownRefresh(() => {
		refresh()
		setTimeout(function () {
			uni.stopPullDownRefresh()
		}, 1000)
	})
	
	const refresh = () => {
		goodsData.query.noLoading = false
		if(loadMoreRef.value) loadMoreRef.value.changeStatusNoLoading()
		goodsData.params.pageNum = 1
		goodsData.list = []
		articleData.params.pageNum = 1
		articleData.list = []
		bannerData.list = []
		articleList()
		goodsList()
		getBanner()
	}
	
	const openWeightPopup = (item:any) => {
		if(nav.isCertify()) {
			item.weight = item.upShelvesWeight
			goodsData.item = item
			changeWeightPopup()
		}
		
	}
	
	const closeWeightPopup = () => {
		changeWeightPopup()
	}
	
	const changeWeightPopup = () => {
		showWeightPopup.value = !showWeightPopup.value
	}
	
	const shoppingCartWeightSure = (data:any) => {
		changeWeightPopup()
		purchaseCarAdd(data)
	}
	
	const purchaseCarAdd = (data:any) => { 
		goods.setShoppingCartAdd(data).then((res:any) => {
			tip.showToast('成功加入购物车！')
			shoppingCart()
			// uni.showModal({
			// 	title:'添加购物车',
			// 	content:'添加成功',
			// 	confirmColor:'#1769ff',
			// 	confirmText:'去结算',
			// 	success:(res:any) => {
			// 		if(res.confirm) {
			// 			switchTab('/pages/shop/shoppingCart')
			// 		}
			// 	}
			// })
		})
	}
	
	const shoppingCart = () => {
		goods.getShoppingCart({noJump:true}).then((res:any) => {
			const len = res.data && res.data.length > 9?'9+': res.data.length.toString()
			system.setTabBarBadge({
			  index: 2,
			  text: len
			})
		})
	}
	
	const handleCertify = () => {
		if(isItCertified.value === IsItCertified.agree || isItCertified.value === IsItCertified.noNeedCertify) {
			navigateTo('/pages/auth/certifyDetail')
		} else {
			navigateTo('/pages/auth/certify')
		}
	}
	
	const handleService = () => {
		navigateTo('/pages/service/index')
	}

	const handleTrade = () => {
		navigateTo('/pages/trade/index')
	}
	
	const navigateTo = (url:string) => {
		uni.navigateTo({url:url})
	}
	
	const switchTab = (url:string) => {
		uni.switchTab({url:url})
	}
	
	const previewImg = (url:string) => {
		return util.previewImg(url)
	}
	
	const navWebView = (data:any) => {
		if(data.isextranet === isextranetEnum.yes) {
			uni.navigateTo({
				url:'/pages/webview/index?url=' + data.url
			})
		} else if(data.isextranet === isextranetEnum.no) {
			nav.allNavigateTo(data.url)
		}
	}
	
</script>
<style lang="scss" scoped>

.zh-app {
	padding-bottom:20rpx;
	.swiper {
		margin:20rpx;
		width: 710rpx;
		height: 300rpx;
		.swiper-item {
			width: 710rpx;
			height: 300rpx;
			background:#f8f8f8;
			border-radius: 15rpx;
			.banner {
				width:710rpx;
				height:300rpx;
			}
		}
	}
	.dynamic {
		margin:20rpx;
		padding:23rpx 19rpx 25rpx;
		background-color: $uni-bg-card-color;
		height:70rpx;
		.swiper-article {
			height:38rpx;
		}
		.dynamic-img {
			width: 77rpx;
			height: 33rpx;
		}
		.dynamic-text {
			overflow: hidden;
			display: -webkit-box;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2;  /*要显示的行数*/
			-webkit-box-orient: vertical;
		}
		.right-arrow {
			width: 12rpx;
			height: 22rpx;
			margin-left:36rpx;
		}
	}
	.menus {
		margin:20rpx;
		padding:23rpx 19rpx 25rpx;
		background-color: $uni-bg-card-color;
		.item {
			text-align:center;
			.menu-icon {
				width: 84rpx;
				height: 84rpx;
				display: block;
				margin:17rpx auto 0;
			}
		}
	}
	.business {
		margin:20rpx;
		padding:23rpx 19rpx 25rpx;
		background-color: $uni-bg-card-color;
		.business-icon {
			width: 208rpx;
			height: 208rpx;
		}
	}
	.goods {
		margin:20rpx;
		padding:30rpx;
		background-color: $uni-bg-card-color;
		.tabs {
			padding-bottom:30rpx;
			border-bottom:1rpx solid #eee;
			.active {
				font-weight: bold;
				font-size: 34rpx;
				background:linear-gradient(to right, #FD1D2A, #FF861B);
				-webkit-background-clip: text;
				color: transparent;
				display:inline-block;
			}
		}
		.list {
			// .item:nth-child(n + 2) {
			// 	border-top: 1rpx solid $uni-border-color;
			// }
			.item {
				padding: 30rpx 0 40rpx;
				.thumbnail {
					width: 188rpx;
					height: 188rpx;
					background: #FFFFFF;
					border: 1rpx solid #EEEEEE;
					border-radius: 10rpx;
					text-align:center;
					position: relative;
					overflow: hidden;
					.name {
						position: absolute;
						bottom:0;
						width: 188rpx;
						height: 40rpx;
						line-height: 40rpx;
						background: #E0EFFF;
						z-index:1;
						color:#267CF8;
						font-size:22rpx;
					}
					image {
						width: 100%;
						height:100%;
					}
				}
				.right {
					margin-left:30rpx;
					.tags {
						//margin-top: 20rpx;
						.tags-right {
							text-align:center;
							color:#666666;
							background-color:#F5F6F8;
							padding:0 17rpx;
							height:34rpx;
							line-height: 34rpx;
							font-size: 22rpx;
							margin:20rpx 0 0 10rpx;
							border-radius: 6px;
							white-space:nowrap;
						}
						
					}
					.content {
						.purchase-car-icon {
							width: 34rpx;
							height: 32rpx;
						}
					}
				}
			}
		}
	}
}
</style>
